<template>
  <view class="login">
    <view class="login_title" :style="{ paddingTop: safeTop + 'px' }">
      登录
    </view>
    <view class="login_content">
      <view class="login_avator">
        <image :src="filePath" mode="scaleToFill" />
      </view>
      <view class="login_tips">
        <h1>登录后可享受更多服务</h1>
        <h6>获得你的公开信息</h6>
      </view>
      <button
        class="login_btn"
        @click="open"
      >
        授权登录
      </button>
    </view>
	<uni-popup ref="popup" type="bottom">
		<view class="test-popup">
			<view class="title-text-1">
				请输入头像和昵称
			</view>
			<view class="title-text-2">
				用于显示个人资料
			</view>
			<view class="title-text-3">
				<view class="box1">
					<view class="title-text-3-1">
						头像
					</view>
					<view class="title-text-3-2">
						<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatarUrl"></image>
						</button>
					</view>
				</view>
			</view>
			<view class="title-text-4">
				<view class="title-text-4-1">
					昵称
				</view>
				<view class="title-text-4-2">
					<input type="nickname" placeholder="请输入昵称" class="iput" :value="textnikname" @change="getNickname"/>
				</view>
			</view>
			<view class="title-text-5">
				<button class="button-1" @click="close">取消</button>
				<button class="button-2" @click="submit">确认</button>
			</view>
		</view>
	</uni-popup>
  </view>
</template>

<script>
import { login, upDateInfo, getMyInfo, upLoadFile } from "../../api/api.js";
export default {
  data() {
    return {
      safeTop: "",
	  avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
	  textnikname:'',
    };
  },
  onLoad: function () {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.safeTop = menuButtonInfo.top;
    uni.showLoading({
      title: "请稍后...",
    });
    const token = uni.getStorageSync("token");
    if (token) {
      setTimeout(() => {
        uni.redirectTo({ url: "/pages/index/index" });
        uni.hideLoading();
      }, 1000);
    } else {
      uni.hideLoading();
    }
  },
  computed: {
    filePath() {
      const random = Math.floor(Math.random() * 6) + 1;
      return `../../static/image/avatar/avatar_${random}.png`;
    },
  },
  methods: {
    getUserInfo() {
      uni.showLoading({
        title: "登录中...",
		
      });
      const that = this;
      uni.login({
        success(res) {
          login({ code: res.code }).then((dd) => {
            uni.setStorageSync("token", dd.data);
            uni.getUserInfo({
              success: (res) => {
                // 获取用户信息
                getMyInfo().then((info) => {
					console.log('用户信息',info)
                  upDateInfo({
                    userImg: that.filePath,
                    openid: info.data.openid,
                    userName: `${res.userInfo.nickName}_${Math.floor(
                      Date.now() / 1000
                    )}`,
                  }).then(() => {
                    uni.redirectTo({
                      url: "/pages/index/index",
                    });
                  });
                });
              },
              fail: () => {
                // 获取失败的去引导用户授权
                uni.showToast({
                  title: "您需要授权，才能获取您的信息！",
                });
              },
              complete: () => {
                uni.hideLoading();
              },
            });
          });
        },
      });
    },
	open() {
		// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持         
		//['top','left','bottom','right','center']
		this.$refs.popup.open('bottom') //底部弹出
	},
	close() {
		this.$refs.popup.close()
	},
	login() {
		this.show = true
	},
	onChooseAvatar(e) {
		console.log('微信头像信息', e.detail.avatarUrl)
		console.log('昵称',this.textnikname)
		// 将数据赋值
		this.avatarUrl = e.detail.avatarUrl
	},
	getNickname(e){
		this.textnikname = e.detail.value
	},
	submit(){
		uni.showLoading({
			title: "登录中...",
		});
		const that = this;
		console.log(this.avatarUrl,'78888888888888888888888888888888888888888888888888')
		uni.login({
			success(res) {
				console.log(res, '11111111111')
				login({
					code: res.code
				}).then((dd) => {
					console.log(dd, '5555555555555555555555555555')
					uni.setStorageSync("token", dd.data);
					uni.getUserInfo({
						// success: (res) => {
						// 	console.log(res, '666666666666666666')
						// 	uni.redirectTo({
						// 		url: "/pages/order/order",
						// 	});
						// },
						success: (res) => {
						  // 获取用户信息
						  console.log('getUserInfo的返回',res)
						  getMyInfo().then((info) => {
							// console.log('用户信息',info)
							console.log(that.avatarUrl,'78888888888888888888888888888888888888888888888888')
						    upDateInfo({
						      userImg: that.avatarUrl,
						      openid: info.data.openid,
						      userName: that.textnikname,
						    }).then((res) => {
								console.log('upDateInfo的返回',res)
								if(res.code===200){
									 // getMyInfo().then((res)=>{
										//  console.log(res,'xinxixixixixixixixixixi')
									 // })
								}
						      uni.redirectTo({
						        url: "/pages/index/index",
						      });
						    });
						  });
						},
						fail: () => {
							// 获取失败的去引导用户授权
							uni.showToast({
								title: "您需要授权，才能获取您的信息！",
							});
						},
						complete: () => {
							uni.hideLoading();
						},
					});
				});
			},
		});
	}
  },
};
</script>

<style lang="scss">
page {
  background: #fbf6fa;
}
.login {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 40rpx;
  justify-content: center;
  height: calc(100vh - 80rpx);
  flex: 1;
  .login_title {
    font-size: 30rpx;
    font-weight: bold;
  }
  .login_content {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
    margin-top: -300rpx;
  }

  .login_avator {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    padding: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid #e8e3e7;
    image {
      width: 190rpx;
      height: 190rpx;
      border-radius: 50%;
    }
  }
  .login_tips {
    margin-top: 40rpx;
    padding-top: 60rpx;
    border-top: 1px solid #e8e3e7;
    h1 {
      font-weight: bold;
      font-size: 30rpx;
      color: #262626;
    }
    h6 {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #938e92;
    }
  }
  .login_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80rpx;
    border-radius: 100rpx;
    background: linear-gradient(180deg, #ff8d1a 12.5%, #ffc300 100%);
    color: #fff;
    font-size: 28rpx;
    font-weight: 700;
    margin-top: 70rpx;
  }
}
	.test-popup {
		background: white; //默认全屏时灰色，只需要把你需要的部分改成白色
		// padding-top: 20px;
		border-radius: 20px 20px 0 0; //设置弧度的大小
		height: 295px;
		position: relative;
		margin-bottom: -34px;
	
		.title-text-1 {
			width: 100%;
			text-align: center;
			// font-size: 17px;
			margin-bottom: 20px;
			position: absolute;
			top: 15px;
		}
	
		.title-text-2 {
			width: 100%;
			text-align: center;
			font-size: 22rpx;
			color: #666;
			position: absolute;
			top: 55px;
	
		}
	
		.title-text-3 {
			position: absolute;
			width: 100%;
			top: 70px;
			padding: 16rpx;
			box-sizing: border-box;
	
			.box1 {
				width: 100%;
				border-bottom: 1px solid #dedede;
				padding-bottom: 10rpx;
				display: flex;
	
				.title-text-3-1 {
					font-size: 32rpx;
					color: #818181;
					width: 120rpx;
					text-align: center;
					line-height: 57px;
				}
	
				.title-text-3-2 {
					width: 55px;
					height: 55px;
					border: 1px dashed #cccccc;
					margin-left: 55rpx;
	
					.avatar {
						width: 100%;
						height: 100%;
						background: #22ac38;
						padding: 0;
					}
				}
			}
	
		}
	
		.title-text-4 {
			position: absolute;
			width: 100%;
			display: flex;
			top: 145px;
			padding-left: 16rpx;
	
			.title-text-4-1 {
				font-size: 32rpx;
				color: #818181;
				width: 120rpx;
				text-align: center;
				line-height: 57px;
			}
	
			.title-text-4-2 {
				display: flex;
				align-items: center;
				margin-left: 55rpx;
			}
		}
	
		.title-text-5 {
			display: flex;
			width: 100%;
			position: absolute;
			justify-content: center;
			bottom: 86rpx;
	
			.button-1 {
				width: 170rpx;
				height: 60rpx;
				font-size: 32rpx;
				line-height: 60rpx;
				border: 0rpx;
				margin: 0;
				margin-right: 25rpx;
			}
	
			.button-2 {
				width: 170rpx;
				height: 60rpx;
				font-size: 32rpx;
				line-height: 60rpx;
				border: 0rpx;
				background-color: #22ac38;
				color: white;
				margin: 0;
				margin-left: 25rpx;
			}
		}
	}
</style>
